<!DOCTYPE HTML>
<html>

<head>
	<meta charset="UTF-8" />
	<title>axios的使用</title>
</head>

<body>
	<h1>axios的使用</h1>
	<form id="ff" onsubmit="return false;">
		姓名*：<input type="text" id="name" name="name" maxlength="30" placeholder="姓名" required="required"
			autofocus="autofocus"><br />
		电话： <input type="text" id="phone" name="phone" maxlength="25" placeholder="+86-22-81886305"><br />
		邮箱： <input type="email" id="email" name="email" placeholder="name@domain.com"><br />
		address1： <input type="text" id="address1" name="address1" maxlength="10" placeholder="省/直辖市/自治区"><br />
		address2： <input type="text" id="address2" name="address2" maxlength="10" placeholder="市/县/区"><br />
		address3： <input type="text" id="address3" name="address3" maxlength="30" placeholder="详细地址"><br />
		邮编： <input type="text" id="postalCode" name="postalCode" maxlength="6" placeholder="300000"><br />
		出生日期： <input type="date" id="dob" name="dob" placeholder="请选择日期"><br />
		备注： <input type="text" id="note" name="note" maxlength="64" placeholder="备注"><br />
		<input type="submit" value="新建联系人">
	</form>
	<button id="btnCreate" type="button">Create(参数为JSON)</button>
	<button id="btnGetOne" type="button">Get One</button>
	<button id="btnSearch" type="button">Search</button>
	<button id="btnUpdate" type="button">Update(参数为JSON)</button>
	<button id="btnDelete" type="button">Delete</button>
	<button id="btnUpdateAddr" type="button">Update Addr(参数为JSON)</button>
	<hr />
	<h2>运行结果</h2>
	<p id="result"></p>


<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
(function(){
	
document.getElementById("btnCreate").addEventListener("click", onBtnCreate);
document.getElementById("btnGetOne").addEventListener("click", onBtnGetOne);
document.getElementById("btnSearch").addEventListener("click", onBtnSearch);
document.getElementById("btnUpdate").addEventListener("click", onBtnUpdate);
document.getElementById("btnDelete").addEventListener("click", onBtnDelete);
document.getElementById("btnUpdateAddr").addEventListener("click", onBtnUpdateAddr);

function onBtnCreate(event){
  console.log("onBtnCreate")
  
  var data = getFormData();
  
  axios.post('/part03/contacts', data)
  .then(function (response) {
    console.log(response.data);
    document.getElementById("result").innerText=JSON.stringify(response.data);
  })
  .catch(function (error) {
    errorHandler(error);
  });
  
}

function onBtnGetOne(event){
  console.log("onBtnGetOne")
  
  // 为给定 ID 的 user 创建请求
  axios.get('/part03/contacts/12')
  .then(function (response) {
    console.log(response.data);
    document.getElementById("result").innerText=JSON.stringify(response.data);
  })
  .catch(function (error) {
    errorHandler(error);
  });
}

function onBtnSearch(){
  console.log("onBtnSearch")
  // 为给定 ID 的 user 创建请求

  axios.get('/part03/contacts',{
    params: {
	  pageNumber: 1,
      name: "赵钱孙"
    }
  })
  .then(function (response) {
    console.log(response.data);
    document.getElementById("result").innerText=JSON.stringify(response.data);
  })
  .catch(function (error) {
    errorHandler(error);
  });
}

function onBtnUpdate(){
  console.log("onBtnUpdate")
  
  var data = getFormData();
  
  axios.put('/part03/contacts/1', data)
  .then(function (response) {
    console.log(response.data);
    document.getElementById("result").innerText=JSON.stringify(response.data);
  })
  .catch(function (error) {
    errorHandler(error);
  });  
}

function onBtnDelete(){
  console.log("onBtnDelete")
  
  // 为给定 ID 的 user 创建请求
  axios.delete('/part03/contacts/12')
  .then(function (response) {
    console.log(response.data);
    document.getElementById("result").innerText=JSON.stringify(response.data);
  })
  .catch(function (error) {
    errorHandler(error);
  });
  
}

function onBtnUpdateAddr(){
  console.log("onBtnUpdateAddr")
  
  var data = {
	address1: document.getElementById("address1").value,
	address2: document.getElementById("address2").value,
	address3: document.getElementById("address3").value
  }
  
  axios.patch('/part03/contacts/1', data)
  .then(function (response) {
    console.log(response.data);
    document.getElementById("result").innerText=JSON.stringify(response.data);
  })
  .catch(function (error) {
    errorHandler(error);
  });  
}

function getFormData(){
  var data = {
	name:  document.getElementById("name").value,
	phone: document.getElementById("phone").value,
	email: document.getElementById("email").value,
	address1: document.getElementById("address1").value,
	address2: document.getElementById("address2").value,
	address3: document.getElementById("address3").value,
	postalCode: document.getElementById("postalCode").value,
	dob: document.getElementById("dob").value,
	note: document.getElementById("note").value
  }

  return data;
}

function errorHandler(error){
    console.log(error);
    console.log(error.response);
    document.getElementById("result").innerText=JSON.stringify(error.response.data);
}

})();

</script>
</body>

</html>